<template>
    <el-container style="min-height: 100vh;margin-top: -10px">

        <el-aside :width="sideWidth + 'px'"
                 >
            <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
        </el-aside>

        <el-container>
            <el-header style="border-bottom: 1px solid #ccc; ">
                <Header :collapseBtnClass="collapseBtnClass" :collapse="isCollapse" />
            </el-header>
            <el-main>
                <router-view/>
            </el-main>

        </el-container>
    </el-container>
</template>

<script>

    import Aside from '../components/Aside'
    import Header from '../components/Header'

    export default {
        components: {Aside, Header},
        name: 'Home',
        /* created(){
             this.getUser()
         },*/
        data() {

            return {

                msg: "hello chen",
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                logoTextShow: true,
                headerBg: 'headerBg',

            }
        },

        methods: {


            collapse() {  // 点击收缩按钮触发
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) {  // 收缩
                    this.sideWidth = 64
                    this.collapseBtnClass = 'el-icon-s-unfold'
                    this.logoTextShow = false
                } else {   // 展开
                    this.sideWidth = 200
                    this.collapseBtnClass = 'el-icon-s-fold'
                    this.logoTextShow = true
                }
            },

        }
    }
</script>


